<template>
  <div ref="chartRef5" :style="{ width, height }" class="chart"></div>
</template>

<script lang="ts" setup>
  import { Ref, ref, watch } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  const props = defineProps({
    loading: {
      type: Boolean as PropType<Boolean>,
      default: false,
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '100%',
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Array,
      required: true,
    },
    xAxisData: {
      type: Array,
      default: () => ['上城', '拱墅', '西湖', '滨江', '余杭', '萧山', '临平', '钱塘', '富阳'],
    },
    legendData: {
      type: Array,
      default: () => ['劳资', '消费', '邻里', '婚姻里'],
    },
    colorAreaArr: {
      type: Array,
      default: () => [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.14,
              color: 'rgba(114,154,255,0.68)', // 100% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(26,83,229,0)', // 0% 处的颜色
            },
          ],
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.14,
              color: 'rgba(58,250,144,0.68)', // 100% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(58,250,144,0)', // 0% 处的颜色
            },
          ],
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(49, 150, 250, 0.3000)', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(49, 150, 250, 0)', // 100% 处的颜色
            },
          ],
        },

        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(142, 65, 246, 0.3)', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(142, 65, 246, 0)', // 100% 处的颜色
            },
          ],
        },
      ],
    },
    colorTextArr: {
      type: Array,
      default: () => ['#0089FF', '#66FF66', '#00FFFD', '#3196FA', '#8E41F6'],
    },
    legendPosition: {
      type: String,
      default: 'right',
    },
    total: {
      type: Number,
      default: 0,
    },
  });
  const chartRef5 = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef5 as Ref<HTMLDivElement>);
  watch(
    () => props.loading,
    () => {
      if (!props.loading) {
        return;
      }
      //TODO
      initChart();
    },
    { immediate: true }
  );
  function initChart() {
    const series = props.chartData.map((item, index) => {
      return {
        name: props.legendData[index],
        data: item,
        type: 'line',
        showSymbol: false, // 隐藏数据标记点
        symbol: 'none', // 明确设置为无图标（可选）
        areaStyle: {
          color: props.colorAreaArr[index],
        },
        lineStyle: {
          width: 1.6,
          color: props.colorTextArr[index],
        },
        color: props.colorTextArr[index],
      };
    });
    setOptions(
      {
        graphic: [
          {
            type: 'text',
            left: 'left',
            top: 10,
            style: {
              text: '总数：',
              fill: 'rgba(255,255,255,0.5)', // 标题颜色
              fontSize: 14, // 标题字体大小
            },
          },
          {
            type: 'text',
            left: 42,
            top: 8,
            style: {
              text: `${props.total}`,
              fill: '#ffff', // 子标题颜色
              fontSize: 18, // 子标题字体大小
              fontWeight: 'normal', // 子标题字体粗细
            },
          },
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
              color: '#fff',
              width: 1,
              type: 'dashed',
            },
          },
          padding: [2, 4],
          textStyle: {
            fontSize: 12,
            // lineHeight: 14,
          },
        },
        legend: {
          top: 8,
          right: '180px',
          itemWidth: 6,
          itemHeight: 6,
          icon: 'rect',
          textStyle: {
            fontSize: 12,
            color: 'rgba(255,255,255,0.5)',
          },
          data: props.legendData as [],
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: props.xAxisData as [],
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(169,180,223,0.18)',
            },
          },
          axisLabel: {
            color: 'rgba(255,255,255,0.5)',
            fontSize: 10,
            //interval: 0,
            rotate: 30,
          },
        },
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#A9B4DF',
              },
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['rgba(169,180,223,0.18)'],
                width: 1,
                type: 'solid',
              },
            },
          },
        ],
        calculable: true,
        grid: {
          left: 40,
          bottom: 30,
          right: 0,
          top: 40,
        },
        series: series as [],
      },
      true
    );
  }
</script>

<style scoped>
  .chart {
    /* background: url(@/assets/images/screen/chart-bg.svg) no-repeat 40px calc(100% - 20px);
    background-size: 87% auto; */
  }
</style>
